<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>等级评定</title>
  <link rel="stylesheet" href="./css/mdui.min.css" />
  <script src="./js/main.js"></script>
  <script src="./js/readexcel.js"></script>
  <script src="./js/xlsx.core.min.js"></script>
  <style>
    input {
      background: none;
      outline: none;
      border: none;
    }

    input:focus {
      border: none;
    }

    body {
      background-color: rgb(250, 250, 250);
    }

    header {
      background-color: rgb(250, 250, 250);
      z-index: 999;
    }

    .mdui-list-item {
      border-radius: 0 25px 25px 0;
    }

    .mdui-appbar {
      z-index: 1000;
      -webkit-box-shadow: 0 2px 4px -1px rgb(0 0 0 / 10%), 0 4px 5px 0 rgb(0 0 0 / 7%), 0 1px 10px 0 rgb(0 0 0 / 6%);
      box-shadow: 0 2px 4px -1px rgb(0 0 0 / 10%), 0 4px 5px 0 rgb(0 0 0 / 7%), 0 1px 10px 0 rgb(0 0 0 / 6%);
    }

    .ToggleForm {
      display: none;
      height: 500px;
    }

    .ToggleForm:nth-child(1) {
      display: block;
    }

    #UploadName {
      padding: 10px;
      text-align: center;
      color: rgba(0, 0, 0, .7);
      font-size: 15px;
      line-height: 1.5;
      height: 45px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .mytemptitle {
      display: inline-block;
      font-size: 1.5em;
      margin-block-start: 0.83em;
      margin-block-end: 0.83em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      font-weight: bold;
    }

    .mydivtitle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 5px;
    }
  </style>
</head>

<body class="mdui-drawer-body-left mdui-appbar-with-toolbar ">
  <header class="appbar mdui-appbar-fixed">
    <div class="mdui-appbar">
      <div class="mdui-toolbar ">
        <a href="javascript:" class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '#left-drawer'}">
          <i class="mdui-icon material-icons">menu</i></a>
        <a href="javascript:" class="mdui-typo-title">等级评定</a>
      </div>
    </div>
  </header>
  <div>
    <div class="mdui-drawer" id="left-drawer">
      <ul class="mdui-list">
        <li class="mdui-list-item mdui-ripple" mdui-dialog="{target: '#example-1'}">
          <i class="mdui-list-item-icon mdui-icon material-icons">&#xe146;</i>
          <div class="mdui-list-item-content">上传文件</div>
        </li>
        <li class="mdui-list-item mdui-ripple" onclick="delTable()">
          <i class="mdui-list-item-icon mdui-icon material-icons">&#xe872;</i>
          <div class="mdui-list-item-content">清理表格</div>
        </li>
        <li class="mdui-subheader">表格展示</li>
        <li class="mdui-list-item mdui-ripple" id="btn1" onclick="showDiv('div1','btn1')">
          <i class="mdui-list-item-icon mdui-icon material-icons">&#xe54e;</i>
          <div class="mdui-list-item-content">一星级</div>
        </li>
        <li class="mdui-list-item mdui-ripple" id="btn2" onclick="showDiv('div2','btn2')">
          <i class="mdui-list-item-icon mdui-icon material-icons">&#xe54e;</i>
          <div class="mdui-list-item-content">二星级</div>
        </li>
        <li class="mdui-list-item mdui-ripple" id="btn3" onclick="showDiv('div3','btn3')">
          <i class="mdui-list-item-icon mdui-icon material-icons ">&#xe54e;</i>
          <div class="mdui-list-item-content">三星级</div>
        </li>
        <li class="mdui-list-item mdui-ripple" id="btn4" onclick="showDiv('div4','btn4')">
          <i class="mdui-list-item-icon mdui-icon material-icons">&#xe54e;</i>
          <div class="mdui-list-item-content">不通过</div>
        </li>
        <li class="mdui-list-item mdui-ripple" id="btn6" onclick="showDiv('div6','btn6')">
          <i class="mdui-list-item-icon mdui-icon material-icons">&#xe000;</i>
          <div class="mdui-list-item-content">无效数据</div>
        </li>
      </ul>
    </div>
  </div>

  <div style="margin: 15px;">

    <!-- 一星级 -->
    <div id="div1" class="ToggleForm">
      <div class="mydivtitle">
        <div class="mytemptitle">一星级</div>
        <div>
          <button class="mdui-btn mdui-color-deep-purple mdui-ripple" onclick="dowload('tableAll1')">下载当前表格</button>
        </div>
      </div>
      <div class="mdui-table-fluid">
        <table id="tableAll1" class="mdui-table mdui-table-hoverable">
          <thead>
            <tr>
              <th>序号</th>
              <th>分公司</th>
              <th>店铺名称</th>
              <th>客户编码</th>
              <th>档位</th>
              <th>备注</th>
              <th>规范经营（是/否）</th>
              <th>库存核查（通过/未通过）</th>
              <th>库存数据</th>
              <th>通过/未通过</th>
              <th>存销比数据</th>
              <th>通过/未通过</th>
              <th>扫码笔数（笔）</th>
              <th>卷烟扫码销售占比（%）</th>
              <th>扫码销售天数（天）</th>
              <th>聚合支付笔数（笔）</th>
              <th>聚合支付笔数占比（%）</th>
              <th>扫码吻合度</th>
              <th>消费者会员总数（个）</th>
              <th>当月新增会员（个）</th>
              <th>扫码规格覆盖率</th>
              <th>星级评定</th>
            </tr>
          </thead>
          <tbody id="table1">
          </tbody>
        </table>
      </div>
    </div>
    <!-- 一星级 -->

    <!-- 二星级 -->
    <div id="div2" class="ToggleForm">
      <div class="mydivtitle">
        <div class="mytemptitle">二星级</div>
        <div>
          <button class="mdui-btn mdui-color-deep-purple mdui-ripple" onclick="dowload('tableAll2')">下载当前表格</button>
        </div>
      </div>
      <div class="mdui-table-fluid">
        <table id="tableAll2" class="mdui-table mdui-table-hoverable">
          <thead>
            <tr>
              <th>序号</th>
              <th>分公司</th>
              <th>店铺名称</th>
              <th>客户编码</th>
              <th>档位</th>
              <th>备注</th>
              <th>规范经营（是/否）</th>
              <th>库存核查（通过/未通过）</th>
              <th>库存数据</th>
              <th>通过/未通过</th>
              <th>存销比数据</th>
              <th>通过/未通过</th>
              <th>扫码笔数（笔）</th>
              <th>卷烟扫码销售占比（%）</th>
              <th>扫码销售天数（天）</th>
              <th>聚合支付笔数（笔）</th>
              <th>聚合支付笔数占比（%）</th>
              <th>扫码吻合度</th>
              <th>消费者会员总数（个）</th>
              <th>当月新增会员（个）</th>
              <th>扫码规格覆盖率</th>
              <th>星级评定</th>
            </tr>
          </thead>
          <tbody id="table2">
          </tbody>
        </table>
      </div>
    </div>
    <!-- 二星级 -->

    <!-- 三星级 -->
    <div id="div3" class="ToggleForm ">
      <div class="mydivtitle">
        <div class="mytemptitle">三星级</div>
        <div>
          <button class="mdui-btn mdui-color-deep-purple mdui-ripple" onclick="dowload('tableAll3')">下载当前表格</button>
        </div>
      </div>
      <div class="mdui-table-fluid">
        <table id="tableAll3" class="mdui-table mdui-table-hoverable">
          <thead>
            <tr>
              <th>序号</th>
              <th>分公司</th>
              <th>店铺名称</th>
              <th>客户编码</th>
              <th>档位</th>
              <th>备注</th>
              <th>规范经营（是/否）</th>
              <th>库存核查（通过/未通过）</th>
              <th>库存数据</th>
              <th>通过/未通过</th>
              <th>存销比数据</th>
              <th>通过/未通过</th>
              <th>扫码笔数（笔）</th>
              <th>卷烟扫码销售占比（%）</th>
              <th>扫码销售天数（天）</th>
              <th>聚合支付笔数（笔）</th>
              <th>聚合支付笔数占比（%）</th>
              <th>扫码吻合度</th>
              <th>消费者会员总数（个）</th>
              <th>当月新增会员（个）</th>
              <th>扫码规格覆盖率</th>
              <th>星级评定</th>
            </tr>
          </thead>
          <tbody id="table3">
          </tbody>
        </table>
      </div>
    </div>
    <!-- 三星级 -->

    <!-- 未通过星级 -->
    <div id="div4" class="ToggleForm">
      <div class="mydivtitle">
        <div class="mytemptitle">未通星级</div>
        <div>
          <button class="mdui-btn mdui-color-deep-purple mdui-ripple" onclick="dowload('tableAll0')">下载当前表格</button>
        </div>
      </div>
      <div id="tableAll0" class="mdui-table-fluid">
        <table class="mdui-table mdui-table-hoverable">
          <thead>
            <tr>
              <th>序号</th>
              <th>分公司</th>
              <th>店铺名称</th>
              <th>客户编码</th>
              <th>档位</th>
              <th>备注</th>
              <th>规范经营（是/否）</th>
              <th>库存核查（通过/未通过）</th>
              <th>库存数据</th>
              <th>通过/未通过</th>
              <th>存销比数据</th>
              <th>通过/未通过</th>
              <th>扫码笔数（笔）</th>
              <th>卷烟扫码销售占比（%）</th>
              <th>扫码销售天数（天）</th>
              <th>聚合支付笔数（笔）</th>
              <th>聚合支付笔数占比（%）</th>
              <th>扫码吻合度</th>
              <th>消费者会员总数（个）</th>
              <th>当月新增会员（个）</th>
              <th>扫码规格覆盖率</th>
              <th>星级评定</th>
            </tr>
          </thead>
          <tbody id="table0">
          </tbody>
        </table>
      </div>
    </div>
    <!-- 未通过星级 -->

    <!-- 无效数据 -->
    <div id="div6" class="ToggleForm">
      <div class="mydivtitle">
        <div class="mytemptitle">无效数据</div>
        <div>
          <button class="mdui-btn" disabled></button>
        </div>
      </div>
      <div class="mdui-table-fluid">
        <table class="mdui-table mdui-table-hoverable">
          <thead>
            <tr>
              <th>序号</th>
              <th>分公司</th>
              <th>店铺名称</th>
              <th>客户编码</th>
              <th>档位</th>
              <th>备注</th>
              <th>规范经营（是/否）</th>
              <th>库存核查（通过/未通过）</th>
              <th>库存数据</th>
              <th>通过/未通过</th>
              <th>存销比数据</th>
              <th>通过/未通过</th>
              <th>扫码笔数（笔）</th>
              <th>卷烟扫码销售占比（%）</th>
              <th>扫码销售天数（天）</th>
              <th>聚合支付笔数（笔）</th>
              <th>聚合支付笔数占比（%）</th>
              <th>扫码吻合度</th>
              <th>消费者会员总数（个）</th>
              <th>当月新增会员（个）</th>
              <th>扫码规格覆盖率</th>
              <th>星级评定</th>
            </tr>
          </thead>
          <tbody id="errortable">
          </tbody>
        </table>
      </div>
    </div>
    <!-- 无效数据 -->
  </div>

  <div class="mdui-dialog" id="example-1">
    <div class="mdui-dialog-title">请选择excel文件</div>
    <div class="mdui-dialog-content">
      <div id="UploadName"></div>
      <div class="mdui-valign ">
        <input type="file" id="excel" style="display: none;"
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,text/csv"
          single />
        <button onclick="Select_the_file()"
          class="mdui-center mdui-btn mdui-btn-raised mdui-ripple mdui-color-pink-a200 mdui-btn-block">上传文件</button>
      </div>
      <div class="mdui-dialog-actions">
        <button class="mdui-btn mdui-ripple" mdui-dialog-close>返回</button>
        <button class="mdui-btn mdui-ripple" onclick="UploadYes()" mdui-dialog-confirm>确定</button>
      </div>
    </div>
  </div>
  </div>
  <script src="./js/mdui.min.js"></script>
  <script>
    document.querySelector('#excel').onchange = function (e) {
      var file = e.target.files[0];
      document.getElementById("UploadName").innerHTML = file.name
    }
  </script>
</body>

</html>